<template>
  <div class="model-analysis-left-bar">
    <div class="search-function function-section">
      <search-popover
        :model-nodes="modelNodes"
        :show="searchPopoverShow"
        @visible-change="(visible) => searchPopoverShow = visible"
        @cancel="cancelSearch"
        @confirm="confirmSearch"
      />
    </div>

    <div ref="graphAnalysisContainer" class="analysis-function function-section">

      <!-- 两点之间路径查询 -->
      <search-path-popover
        :select-nodes-info="selectNodesInfo"
        :show="searchPathPopoverShow"
        :query-mode="1"
        class="first-function-icon"
        @visible-change="(visible) => searchPathPopoverShow = visible"
        @cancel="cancelSearchPath"
        @confirm="confirmQueryTwoPath"
      />
      <div class="horizontal-divider"></div>

      <!-- 多点之间路径查询 -->
      <!--        <search-path-popover-->
      <!--          :node-list="selectNodesInfo"-->
      <!--          :show="multiPointPathPopoverShow"-->
      <!--          :query-mode="2"-->
      <!--          @visible-change="(visible) => multiPointPathPopoverShow = visible"-->
      <!--        />-->

      <!-- 社团检测 Community detection -->
      <community-detection-popover
        :node-list="selectNodesInfo"
        :show="communityDetectionShow"
        class="last-function-icon"
        @visible-change="(visible) => communityDetectionShow = visible"
        @cancel="cancelQueryCluster"
        @confirm="confirmQueryCluster"
      />
    </div>

  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Emit} from 'vue-property-decorator'
import SearchPathPopover from '@/components/graph/SearchPathPopover.vue'
import CommunityDetectionPopover from '@/components/graph/CommunityDetectionPopover.vue'
import SearchPopover from '@/components/graph/SearchPopover.vue'

@Component({
  components: {
    SearchPathPopover,
    CommunityDetectionPopover,
    SearchPopover,
  }
})
export default class ModelAnalysisLeftBar extends Vue {
  @Prop() modelNodes: any   // 构建图中的节点
  @Prop() selectNodesInfo: any  // 路径查询用的选择的节点

  public searchPopoverShow: boolean = false  // 搜索 popover
  public searchPathPopoverShow: boolean = false  // 两点之间路径查询
  // public multiPointPathPopoverShow: boolean = false  // 多点之间路径查询
  public communityDetectionShow: boolean = false  // 社团检测


  public mounted() {
    document.addEventListener('keyup', this.globalKeyUp)
    document.addEventListener('keydown',this.globalKeyDown)
  }

  public beforeDestroy() {
    document.removeEventListener('keyup', this.globalKeyUp)
    document.removeEventListener('keydown', this.globalKeyDown)
  }

  /**
   * 取消搜索 $emit
   */
  @Emit('cancel-search')
  public cancelSearch() {
    this.searchPopoverShow = false
  }

  /**
   * 搜索 $emit
   */
  @Emit('confirm-search')
  public confirmSearch(parameters: any) {
    this.searchPopoverShow = false
    return parameters
  }

  /**
   * popover 取消路径查询 $emit
   */
  @Emit('cancel-path')
  public cancelSearchPath() {
    this.searchPathPopoverShow = false
  }

  /**
   * 两点之间路径查询  $emit
   */
  @Emit('confirm-path')
  public confirmQueryTwoPath($emitInfo: any) {
    this.searchPathPopoverShow = false
    const selectNodesId = this.selectNodesInfo.map((node: any) => node._cfg.model.id)
    return {selectNodesId, type: $emitInfo.type, maxStep: $emitInfo.maxStep, from: 2}
  }


  /**
   * 取消社团检测 $emit
   */
  @Emit('cancel-cluster')
  public cancelQueryCluster() {
    this.communityDetectionShow = false
  }

  /**
   * 社团检测 $emit
   */
  @Emit('confirm-cluster')
  public confirmQueryCluster(maxIter: number) {
    this.communityDetectionShow = false
    return maxIter
  }


  /**
   * 快捷键监听  ArrowDown: 下, ArrowUp: 上,  Enter: enter
   * @param $event
   */
  public globalKeyDown($event: KeyboardEvent) {
    console.log($event)
  }
  public globalKeyUp($event: KeyboardEvent) {
    console.log($event)

  }
}
</script>

<style scoped lang="less">
/* 功能按钮 */
.model-analysis-left-bar {
  align-items: center;
  background-color: transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 34px;
  z-index: 100;

  // 搜索 路径搜索 社团检测
  .function-section {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(103, 113, 252, 0.1);
  }

  .search-function {
    margin-bottom: 12px;
  }


  .horizontal-divider {
    border-top: 1px solid #d3daff;
    height: 1px;
    width: 34px;
  }
}

</style>
